<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <span class="secondtitle">员工档案录入</span>

        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-row style="width: 500px;left: 300px;position: relative;display: block">
          <el-form ref="ruleForm" :rules="rules" :model="worker_form" label-width="80px" style="top: 20px;position: relative">
            <el-form-item label="员工编号" prop="id">
              <el-input v-model="worker_form.id"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名" prop="name">
              <el-input v-model="worker_form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="worker_form.gender" class="radio_s">
                <el-radio  label="男"></el-radio>
                <el-radio  label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone_number">
              <el-input v-model="worker_form.phone_number"></el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="id_number">
              <el-input v-model="worker_form.id_number"></el-input>
            </el-form-item>

            <el-form-item label="家庭住址" prop="address">
              <el-input v-model="worker_form.address"></el-input>
            </el-form-item>

            <el-form-item label="公司id" prop="company_id">
              <el-input v-model="worker_form.company_id"></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="worker_form.email"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>

        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "employeeFile",
  data(){
    return {
      worker_form: {
        id:'',
        name: '',
        gender: '',
        phone_number: '',
        id_number: '',
        address: '',
        company_id: '',
        email: ''
      },
      rules: {
        id: [{required: true, message: '请输入员工id', trigger: 'blur'}],
        name: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        phone_number: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位有效电话号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入家庭住址', trigger: 'blur' }
        ],
        id_number: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入18位有效身份证号码', trigger: 'blur' }
        ],
        company_id: [{required: true, message: '请输入公司id', trigger: 'blur'}],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' }
        ]
      },

    }


  },

  methods: {
    cancel(){
      this.worker_form={brand_right:0}
    },
    Selct(index, indexpath) {
      console.log('------------------')
      console.log(index);
    },
    onSubmit() {
      console.log('submit!');
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm() {
      axios({
        url: '/worker/addWorker',
        method: 'post',
        data: {
          id: this.worker_form.id,
          name: this.worker_form.name,
          gender: this.worker_form.gender,
          phone_number: this.worker_form.phone_number,
          id_number: this.worker_form.id_number,
          address: this.worker_form.address,
          company_id: this.worker_form.company_id,
          email: this.worker_form.email
        },
        // headers: {
        //   'Content-Type': 'application/x-www-form-urlencoded'
        // }//不能添加此字段
      }).then((res)=>{
        if (res.data.msg=='success'){
          this.worker_form={brand_right:0}
          this.$message( {
            message: '添加成功',
            type: 'success'
          })
        }else {
          this.$message.error('添加失败');
        }
      }).catch((err)=>{
        this.$message.error('添加失败，请联系管理员');
      })
    }
  }
}
</script>

<style>
.el-form-item__label{
  color: black;
  font-size: 14px;
}
</style>
